<template>
  <div class="superSaleZJdouble">
    <div v-for="oneList in goodsList" :key="oneList.id" class="father">
      <div class="goodsList1">
        <div class="dis">
          <img src="@assets/images/superSaleZJdouble/t1.png" alt="" />
        </div>
        <div class="goodsList" style="padding-top:.72rem;">
          <div class="listDivBig" v-if="oneList.listDivBig.length > 0">
            <img
              @click="toDetail(img.id)"
              v-for="img in oneList.listDivBig"
              :key="img.id"
              v-lazy="img.url"
              alt=""
            />
          </div>
          <div class="listDivSmall" v-if="oneList.listDivSmall1.length > 0">
            <img
              @click="toDetail(img.id)"
              v-for="img in oneList.listDivSmall1"
              :key="img.id"
              v-lazy="img.url"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="goodsList2" style="margin-top:.88rem;">
        <div class="dis">
          <img src="@assets/images/superSaleZJdouble/t2.png" alt="" />
        </div>
        <div class="goodsList" style="padding-top:1.2rem;">
          <div class="listDivSmall" v-if="oneList.listDivSmall.length > 0">
            <img
              @click="toDetail(img.id)"
              v-for="img in oneList.listDivSmall"
              :key="img.id"
              v-lazy="img.url"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cookie from "@utils/store/cookie";
import share from "../../assets/js/common/share.js";
import shareMsg from "../../assets/js/common/shareConfig.js";

export default {
  name: "superSaleZJdouble",
  props: {},
  data: function () {
    return {
      deg: "0",
      from1: "h5",
      goodsList: [
        {
          header: "限量特惠",
          type: "2",
          listDivBig: [
            {
              url: require("@assets/images/superSaleZJdouble/1401.png"),
              id: "1401"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1400.png"),
              id: "1400"
            }
          ],
          listDivSmall1: [
            {
              url: require("@assets/images/superSaleZJdouble/1306.png"),
              id: "1306"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1413.png"),
              id: "1413"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1416.png"),
              id: "1416"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1415.png"),
              id: "1415"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1138.png"),
              id: "1138"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1417.png"),
              id: "1417"
            }
          ],
          listDivSmall: [
            {
              url: require("@assets/images/superSaleZJdouble/1428.png"),
              id: "1428"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1430.png"),
              id: "1430"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1431.png"),
              id: "1431"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1432.png"),
              id: "1432"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1435.png"),
              id: "1435"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1437.png"),
              id: "1437"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1438.png"),
              id: "1438"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1439.png"),
              id: "1439"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1440.png"),
              id: "1440"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1442.png"),
              id: "1442"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1443.png"),
              id: "1443"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1445.png"),
              id: "1445"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1446.png"),
              id: "1446"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1447.png"),
              id: "1447"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1449.png"),
              id: "1449"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1448.png"),
              id: "1448"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1115.png"),
              id: "1115"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1108.png"),
              id: "1108"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1097.png"),
              id: "1097"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1045.png"),
              id: "1045"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1053.png"),
              id: "1053"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1406.png"),
              id: "1406"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1407.png"),
              id: "1407"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1403.png"),
              id: "1403"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1404.png"),
              id: "1404"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1402.png"),
              id: "1402"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1179.png"),
              id: "1179"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1061.png"),
              id: "1061"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1065.png"),
              id: "1065"
            },
            {
              url: require("@assets/images/superSaleZJdouble/1083.png"),
              id: "1083"
            }
          ]
        }
      ]
    };
  },
  watch: {},
  mounted() {
    if (this.$route.query.isToken) {
      this.$store.commit(
        "LOGIN",
        this.$route.query.isToken
        // dayjs(expires_time) - newTime
      );
      cookie.set("OID", this.$route.query.oId);
    }
    var shareUrl1 = window.location.href.split("?")[0];
    if (this.$route.query.from1 == "app") {
      this.appBridge("title", { title: "湛江乡村振兴好物馆" });
      shareMsg.shareConfig(
        "app",
        "0",
        "0",
        "湛江双11好物大促",
        "湛江乡村振兴11.11购物节，珍品特产钜惠享不停...",
        shareUrl1,
        "https://seefm.oss-cn-beijing.aliyuncs.com/image/shenjiang_good_shop.png",
        "",
        "1"
      );
    }
    share.share(
      shareUrl1,
      "湛江双11好物大促",
      "湛江乡村振兴11.11购物节，珍品特产钜惠享不停...",
      "https://seefm.oss-cn-beijing.aliyuncs.com/image/shenjiang_good_shop.png"
    );
    share.QQshare(
      shareUrl1,
      "湛江双11好物大促",
      "湛江乡村振兴11.11购物节，珍品特产钜惠享不停...",
      "https://seefm.oss-cn-beijing.aliyuncs.com/image/shenjiang_good_shop.png"
    );
  },
  created() {
    if (this.$route.query.from1) {
      this.from1 = this.$route.query.from1;
    }
    cookie.set("from1", this.from1);
    this.changeDeg();
  },
  methods: {
    changeDeg() {
      setInterval(() => {
        if (this.deg == "0") {
          this.deg = "5";
        } else {
          this.deg = "0";
        }
      }, 500);
    },
    /**
     * @description: 跳转至详情页
     * @param {*} id 商品id
     * @return {*}
     */   
    toDetail(id) {
      if (this.from1 == "app") {
        this.$router.push({
          path: "/detail/" + id + "?mer_id=5062512&from1=" + this.from1
        });
      } else {
        this.$router.push({
          path: "/detail/" + id + "?mer_id=5062512"
        });
      }
    }
  }
};
</script>
<style scoped>
.superSaleZJdouble {
  width: 100%;
  box-sizing: border-box;
  min-height: 100vh;
  height: auto;
  background: #EC1947 url("../../assets/images/superSaleZJdouble/top.png") 0 0 no-repeat;
  background-size: 100% 7.2rem;
}
.father {
  width: 100%;
  box-sizing: border-box;
  margin: 5.8rem auto 0.4rem;
}
.superSaleZJdouble .goodsList {
  width: 7.18rem;
  padding: 0.32rem 0rem;
  border-radius: 0.08rem;
  border: 0.02rem solid #F5A623;
  background: #FF4C56;
  box-sizing: border-box;
  margin: auto;
  height: auto;
  border-radius: 0.08rem;
}
.superSaleZJdouble .goodsList1,
.superSaleZJdouble .goodsList2 {
  position: relative;
}
.superSaleZJdouble .goodsList1 .dis {
  position: absolute;
  width: 7.5rem;
  height: 1.6rem;
  top: -0.68rem;
}
.superSaleZJdouble .goodsList2 .dis {
  position: absolute;
  width: 7.5rem;
  height: 2.04rem;
  top: -0.68rem;
}
.superSaleZJdouble .dis img {
  width: 100%;
  height: 100%;
  display: block;
}
.superSaleZJdouble .listDivSmall {
  margin: 0 0.12rem;
  display: flex;
  box-sizing: border-box;
  display: -webkit-flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
  /* padding-bottom: 0.2rem; */
}
.superSaleZJdouble .listDivSmall img {
  width: 2.26rem;
  height: 3.6rem;
  margin-bottom: 0.08rem;
}
.superSaleZJdouble .listDivBig {
  margin: 0 0.12rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-direction: row;
  height: auto;
}
.superSaleZJdouble .listDivBig img {
  width: 3.42rem;
  height: 4.92rem;
  margin-bottom: 0.08rem;
}
</style>
